<template>
  <div class="container" :style="scaleStyle">
    <div class="container_top">
      <div class="topleft">
        <div class="normalbutton" style="width:110px;" @click="$router.back()">返回</div>
      </div>
      <p>{{ cityname }}.学校画像</p>
      <div class="topright">
        <div>
          统计时间：
          <el-select style="width: 132px; z-index: 9; position: relative" v-model="localYear"
                     :popper-append-to-body="false">
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="selectbox"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="container_body">
      <div class="sidebox">
        <div class="maintitle"><p>资源信息</p></div>
        <div class="mainbox">
          <div class="mainbox_content">
            <div class="subtitle"><p>场地信息</p></div>
            <div class="flexbetween"
                 style="justify-content: space-around; padding-bottom: 20px; border-bottom:1px dashed rgba(255,255,255,0.32);">
              <div class="midtopcontent" v-for="(item,index) in data.resource.grounddata" :key="index"
                   style="height:80px;">
                <p class="normaltxt">{{ item.name }}</p>
                <rollNum :num="item.value" :num-l=4></rollNum>
                <p class="normaltxt">平方米</p>
              </div>
            </div>
            <div class="subtitle"><p>教室信息</p></div>
            <div class="flexwrap" style=" padding-bottom: 10px; border-bottom:1px dashed rgba(255,255,255,0.32);">
              <div :class="'listbox listbox2'+index" v-for="(item,index) in data.resource.classroom" :key="index">
                <p class="listval">{{ item.value }}</p>
                <p class="listname">{{ item.name }} 间</p>
              </div>
            </div>
            <div class="subtitle"><p>设备信息</p></div>
            <div class="flexbetween" style=" padding-bottom: 20px; border-bottom:1px dashed rgba(255,255,255,0.32);">
              <div class="tjbox1" v-for="(item,index) in data.resource.equipment" :key="index">
                <p :class="'normaltxt tjval'+index"><span class="keyblue">{{ item.value }}</span></p>
                <p class="normaltxt" style="margin-top:-20px;">{{ item.name }} {{ item.unit }}</p>
              </div>
            </div>
            <div class="subtitle"><p>教师信息</p></div>
            <div class="flexbetween" style=" padding-bottom: 20px; border-bottom:1px dashed rgba(255,255,255,0.32);">
              <div class="flexlist">
                <p class="normaltxt"><span>{{ data.resource.teacher.total }}</span></p>
                <p class="normaltxt">教师数量 人</p>
              </div>
              <div class="flexlist">
                <div class="progressbox2" style="margin-top:15px; width:310px;">
                  <div :class="'progresscurbox'+index" v-for="(item,index) in data.resource.teacher.data"
                       :key=index :style="{'width':item.percent+'%'}"></div>
                </div>
                <div class="flexbetween">
                  <p :class="'normaltxt listtxt listtxt'+index" v-for="(item,index) in data.resource.teacher.data"
                     :key="index">
                    {{ item.name }}: <span class="keyblue">{{ item.value }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="subtitle"><p>教师学历分布</p></div>
            <v-chart :option="chartpie1" style="width:100%; height:190px"></v-chart>
          </div>
        </div>

      </div>
      <div class="midbox">
        <div class="maintitle" style="background: none"><p>基础信息</p></div>
        <div class="midbody">
          <div class="midcontent" style="left:0;">
            <div class="midinfobox1" style="margin-top:40px; animation: cloud 1s 2s ease-in infinite alternate;">
              <p class="normaltxt midtxt"><span class="keyblue">学校名称：</span>{{ data.baseinfo.name }} </p>
            </div>
            <div class="midinfobox1" style="animation: cloud 1.5s 1.5s ease-in infinite alternate;">
              <p class="normaltxt midtxt"><span class="keyblue">属性：</span>{{ data.baseinfo.type }} </p>
            </div>
            <div class="midinfobox1" style="animation: cloud 2s 2s ease-in infinite alternate;">
              <p class="normaltxt midtxt"><span class="keyblue">类别：</span>{{ data.baseinfo.schooltype }} </p>
            </div>
          </div>
          <div class="midcontent" style="right:5px;">
            <div class="midinfobox2" style="margin-top:40px;animation: cloud 1s 2s ease-in infinite alternate;">
              <p class="normaltxt midtxt" style="padding-left: 180px;"><span
                class="keyblue">总面积：</span>{{ data.baseinfo.area }} </p>
            </div>
            <div class="midinfobox2" style="animation: cloud 1.5s 1.5s ease-in infinite alternate;">
              <p class="normaltxt midtxt" style="padding-left: 180px;"><span
                class="keyblue">地址：</span>{{ data.baseinfo.address }} </p>
            </div>
            <div class="midinfobox2"
                 style="line-height: 24px; padding-top:20px;animation: cloud 2s 2s ease-in infinite alternate;">
              <p class="normaltxt midtxt2" style="padding-left: 180px;"><span
                class="keyblue">简介：</span>{{ data.baseinfo.content }} </p>
            </div>
          </div>
        </div>
      </div>
      <div class="sidebox">
        <div class="maintitle"><p>招生信息</p></div>
        <div class="mainbox" style="height:685px;">
          <div class="mainbox_content">
            <div class="flexbetween">
              <div :class="'zslist zslist'+index" v-for="(item,index) in data.students.baseinfo" :key="index">
                <p class="normaltxt"><span class="keyblue">{{ item.value }}</span></p>
                <p class="normaltxt">{{ item.name }}</p>
              </div>
            </div>
            <div class="subtitle" style="margin-top:-30px;"><p>学区内的地址</p></div>
            <div class="wrap-table head">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width: 10%"/>
                  <col style="width: 90%"/>
                </colgroup>
                <thead>
                <tr>
                  <th>排名</th>
                  <th>地址</th>
                </tr>
                </thead>
              </table>
            </div>
            <div class="wrap-table body" style="height: 170px; overflow: auto">
              <table style="border-spacing: 0">
                <colgroup>
                  <col style="width:10%"/>
                  <col style="width: 2%"/>
                </colgroup>
                <tr v-for="(item,index) in data.students.data" :key="index" style="cursor: pointer"
                >
                  <td><p :class="index<1?'yellowkey': ''">{{ (index + 1) }}</p>
                  <td><p>{{ item.name }}</p>
                  </td>
                  <td><p>{{ item.address }}</p></td>
                </tr>
              </table>
            </div>
            <div class="subtitle"><p>历年招生趋势</p></div>
            <v-chart :option="chartBar" style="width:100%; height:140px"></v-chart>
            <div class="subtitle"><p>各类别录取率</p></div>
            <div class="flexbetween popcircle">
              <div class="yzjzbox" style="width:30%;position: relative; height:100px;"
                   v-for="(item,index) in data.students.piedata"
                   :key="index">
                <v-chart :option="getBarOption('chartpie2'+index)" style="width:100%; height:100px"></v-chart>
                <div class="yzjzcircle2"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="maintitle"><p>招生信息</p></div>
        <div class="mainbox" style="height:180px;">
          <div class="mainbox_content">
            <div class="yzjzbox" style="width:100%;position: relative;">
              <v-chart :option="chartpie3" style="width:100%; height:180px"></v-chart>
              <div class="yzjzcircle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import autoPage from '../utils/autoPage'
import VChart from 'vue-echarts'
import rollNum from '../components/rollNum'

export default {
  name: 'yubaom',
  components: {
    VChart,
    rollNum
  },
  extends: autoPage,
  data () {
    return {
      cityname: '东阳市',
      localYear: '2022',
      yearList: [
        {label: '2022年', value: '2022'},
        {label: '2021年', value: '2021'},
        {label: '2020年', value: '2020'},
        {label: '2019年', value: '2019'},
        {label: '2018年', value: '2018'}
      ],
      data: {
        baseinfo: {
          name: '某某某某学校',
          type: '某某属性',
          schooltype: '小学',
          area: 12345,
          address: '浙江省东阳市吴宁街道中心路12号',
          content: '学校曾获全国德育实验学校、国家级绿色学校、全国“创建适合学生发展的学校”实验学校、国际生态学校、'
        },
        resource: { // 资源信息
          grounddata: [ // 场地信息
            {name: '校舍总建筑面积', value: 1234},
            {name: '体育场地面积', value: 834}
          ],
          classroom: [ // 教室信息
            {name: '实验/科学教室', value: 1234},
            {name: '多功能教室', value: 834},
            {name: '计算机教室', value: 1234},
            {name: '音/美教室', value: 834}
          ],
          equipment: [ // 设备
            {name: '教学仪器设备', value: 10234, unit: '套'},
            {name: '图书册数', value: 1234, unit: '册'}
          ],
          teacher: {
            total: 1500,
            data: [ // 教师信息
              {name: '骨干教师', value: 500, percent: 33},
              {name: '普通教师', value: 1000, percent: 67}
            ]
          },
          edudata: [] // 教师学历分布
        },
        students: {
          baseinfo: [ // 招生基本信息
            {name: '当前招生', value: 12340},
            {name: '预报名', value: 2340},
            {name: '计划招生', value: 10340}
          ],
          data: [ // 学区内的小区
            {name: '某某某某小区', address: '浙江省东阳市吴宁街道向前社区某某小区'},
            {name: '某某某某小区', address: '浙江省东阳市吴宁街道向前社区某某小区'},
            {name: '某某某某小区', address: '浙江省东阳市吴宁街道向前社区某某小区'},
            {name: '某某某某小区', address: '浙江省东阳市吴宁街道向前社区某某小区'},
            {name: '某某某某小区', address: '浙江省东阳市吴宁街道向前社区某某小区'},
            {name: '某某某某小区', address: '浙江省东阳市吴宁街道向前社区某某小区'}
          ],
          bardata: [ // 历年招生趋势
          ],
          piedata: [ // 各类别录取率
            {name: 'A类', value: 69},
            {name: 'B类', value: 69},
            {name: 'C类', value: 69}
          ]
        },
        class: [ // 班级信息
          {name: '一年级', value: 10},
          {name: '二年级', value: 5},
          {name: '三年级', value: 11},
          {name: '四年级', value: 8},
          {name: '五年级', value: 6},
          {name: '六年级', value: 7}
        ]
      }

    }
  },
  computed: {
    chartpie1 () {
      let data = this.data.resource.edudata
      let colorList = ['#077CDC', '#04C1FF', '#46C88C', '#FFB936', '#F78FFF', '#6F8CFF', '#00CCFF', '#007DFF']
      const placeHolderStyle = {
        normal: {
          color: 'rgba(0,65,128,0.72)'
        }
      }
      let total = 0
      data.map(item => {
        total += Number(item.value)
      })
      total = parseFloat(total).toFixed(2)
      let seriesData = data.map((item, index) => {
        let percent = Math.round(item.value * 100 / total)
        let radius = 60 - index * 15 + 5
        return {
          name: item.name,
          type: 'pie',
          left: 'left',
          silent: true,
          // clockwise: false,
          center: ['20%', '40%'],
          radius: [`${radius}%`, `${radius + 9}%`],
          itemStyle: {
            normal: {
              color: colorList[index],
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },

          data: [{
            value: 100 - percent,
            name: 'invisible',
            itemStyle: placeHolderStyle
          }, {
            value: percent,
            name: item.name
          }]
        }
      })
      let textStyle = {
        color: '#fff',
        fontSize: 14,
        rich: {
          num: {
            color: '#53E2FF',
            fontSize: 16,
            fontWeight: 'bold'

          },
          txt: {
            color: 'rgba(255,255,255,.72)',
            fontSize: 14,
            padding: [0, 10, 0, 10]
          },
          unit: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'bold'
          }
        }
      }
      return {
        tooltip: {
          show: false,
          formatter: '{a}：{d}%'
        },
        legend: {
          orient: '',
          itemGap: 9,
          left: '45%',
          top: '7%',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: textStyle,
          formatter: function (name) {
            let entity = data.filter(item => item.name === name)[0]
            let entityper = Math.round(entity.value * 100 / total)
            return `${entity.name} {num|${entity.value}}{txt|人}{unit|${entityper}%} `
          },
          data: data.map(item => item.name)
        },

        series: seriesData
      }
    },
    chartBar () {
      let data = this.data.students.bardata
      let color = ['#077CDC', '#04C1FF', '#46C88C', '#FFB936']
      return {
        color: color,
        legend: {
          show: true,
          left: 'right',
          top: 10,
          itemGap: 25,
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          padding: [0, 15, 0, 0],
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,0.72)'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(3,32,64,0.80)',
          borderColor: '#3D5267',
          textStyle: {
            fontSize: 12,
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          fontSize: 12,
          color: '#fff',
          fontStyle: 'normal',
          fontWeight: 'normal'
        },
        grid: [
          {
            left: '4%',
            right: '4%',
            top: '25%',
            bottom: '8%',
            containLabel: true
          }
        ],
        xAxis: {
          type: 'category',
          // name: '类型',
          // nameLocation: 'start',
          // nameGap: 8,
          // nameTextStyle: {
          //   color: 'rgba(255,255,255,0.72)',
          //   verticalAlign: '0',
          //   fontSize: 16,
          //   padding: [12, 0, -22, 0]
          //
          // },
          axisTick: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#3D5267',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: '单位：万人',
          nameTextStyle: {
            color: 'rgba(255,255,255,0.72)',
            fontSize: 12
          },
          splitNumber: 3,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.16)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: 'rgba(255,255,255,0.72)'
            }
          }
        }],
        series: data.map((item, index) => {
          return {
            name: item.name,
            type: 'bar',
            data: item.value.map(itm => [itm.name, itm.value ? itm.value : '']),
            barWidth: 4
          }
        })
      }
    },
    chartpie20 () {
      let data = this.data.students.piedata[0]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            center: ['50%', '45%'],
            itemStyle: {
              normal: {
                color: '#FFB936',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}\n' + data.name,
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 14,
                  color: '#fff', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      color: '#53E2FF',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartpie21 () {
      let data = this.data.students.piedata[1]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            center: ['50%', '45%'],
            itemStyle: {
              normal: {
                color: '#46C88C',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}\n' + data.name,
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 14,
                  color: '#fff', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      color: '#53E2FF',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartpie22 () {
      let data = this.data.students.piedata[2]
      return {
        series: [
          {
            name: data.name,
            type: 'pie',
            clockWise: false,
            radius: ['68%', '85%'],
            center: ['50%', '45%'],
            itemStyle: {
              normal: {
                color: '#077CDC',
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            data: [{
              value: data.value,
              label: {
                formatter: '{value|' + data.value + '%}\n' + data.name,
                position: 'center',
                padding: [5, 0, 0, 0],
                show: true,
                textStyle: {
                  fontSize: 14,
                  color: '#fff', // 跟随其他颜色
                  rich: {
                    value: {
                      fontSize: '16',
                      fontWeight: 'bold',
                      color: '#53E2FF',
                      padding: [0, 0, 10, 0]
                    }
                  }
                }

              }
            }, {
              value: 100 - data.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: '#043c70'
                }

              }
            }]
          }
          // {
          //   name: '',
          //   type: 'pie',
          //   clockWise: false,
          //   radius: ['70%', '85%'],
          //   center: ['50%', '50%'],
          //   itemStyle: {
          //     normal: {
          //       color: '#043c70',
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       }
          //     }
          //   },
          //   data: [100],
          //   z: 0
          // }
        ]
      }
    },
    chartpie3 () {
      let data = this.data.class
      let color = ['#077CDC', '#04C1FF', '#46C88C', '#FFB936', '#F78FFF', '#6F8CFF']
      let objData = this.array2obj(data, 'name')
      let sum = 0
      data.map(item => {
        sum += Number(item.value)
      })
      sum = parseFloat(sum).toFixed(0)
      return {
        title: {
          text: '{name|班级个数}\n{value|' + sum + '}\n{unit|个}',
          textAlign: 'center',
          left: '21%',
          top: '33%',
          textStyle: {
            rich: {
              name: {
                color: '#fff',
                fontSize: 14
              },
              value: {
                height: 20,
                color: '#53E2FF',
                fontSize: 16,
                fontFamily: 'DINPro-Medium'
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)'
              }
            }
          }
        },
        legend: {
          top: '10%',
          left: '45%',
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          data: data,
          itemGap: 8,
          orient: 'vertical',
          formatter: function (name) {
            let per = Math.round(objData[name].value * 100 / sum)
            return '{title|' + name + ':}{value|' + objData[name].value + '}{unit|个}{per|' + per + '%}'
          },
          textStyle: {
            fontSize: 12,
            color: 'rgba(255,255,255,.8)',
            rich: {
              title: {
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                padding: [0, 10, 0, 0]
              },
              value: {
                fontSize: 16,
                color: '#53E2FF',
                align: 'left',
                padding: [0, 0, 0, 10]
              },
              unit: {
                fontSize: 14,
                color: 'rgba(255,255,255,0.72)',
                padding: [0, 0, 0, 10]
              },
              per: {
                fontSize: 16,
                color: '#fff',
                fontWeight: 'bold',
                padding: [0, 0, 0, 10]
              }
            }
          }
        },
        series: [{
          type: 'pie',
          center: ['22%', '47%'],
          radius: ['65%', '84%'],
          itemStyle: {
            color: params => color[params.dataIndex]
          },
          labelLine: {
            show: false
          },
          label: {
            show: false,
            position: 'center',
            fontSize: 14,
            lineHeight: 28,
            color: 'rgba(255,255,255,0.8)',
            formatter: params => {
              let str = `{per| ${params.percent}%}\n{name|${params.name}}`
              return str
            },
            rich: {
              name: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.88)'
              },
              per: {
                fontSize: 20,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'DINPro-Medium'
              }
            }
          },
          z: 3,
          data: data.map(item => {
            return {
              ...item
              // emphasis: {
              //   label: {
              //     show: true
              //   }
              // }
            }
          })
        }]
      }
    }
  },
  methods: {
    getBarOption (name) {
      if (this[name]) return this[name]
      return {}
    },
    array2obj (array, key) {
      const resObj = {}
      for (let i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    compare (key) {
      return function (value1, value2) {
        const val1 = value1[key]
        const val2 = value2[key]
        return val2 - val1
      }
    },
    getData (schoolId) {
      this.$axios({
        method: 'post',
        url: '/doc/api/EduAnalysisXq0023',
        data: {
          year: this.localYear,
          schoolId: schoolId
        }
      }).then((res) => {
        const result = res.result
        console.log('result = ', result)
        this.data.baseinfo = {
          name: result.schoolName,
          type: result.schoolNature === '0' ? '公办' : '民办',
          schooltype: result.schoolCategory === '2' ? '小学' : '初中',
          area: result.schoolXszjzmj,
          address: result.addressName,
          content: result.schoolJj
        }
        this.data.resource.grounddata = [ // 场地信息
          {name: '校舍总建筑面积', value: result.schoolXszjzmj},
          {name: '体育场地面积', value: result.schoolTycdmj}
        ]
        this.data.resource.classroom = [ // 教室信息
          {name: '实验/科学教室', value: result.schoolKxjs},
          {name: '多功能教室', value: result.schoolDgnjs},
          {name: '计算机教室', value: result.schoolJsjjs},
          {name: '音/美教室', value: result.schoolYmjs}
        ]
        this.data.resource.equipment = [ // 设备
          {name: '教学仪器设备', value: result.schoolJxyqs, unit: '套'},
          {name: '图书册数', value: result.schoolTscs, unit: '册'}
        ]
        const total = Number(result.schoolGgjss) + Number(result.schoolPtjss)
        this.data.resource.teacher = {
          total: total,
          data: [ // 教师信息
            {name: '骨干教师', value: result.schoolGgjss, percent: (Number(result.schoolGgjss) / total).toFixed(2)},
            {name: '普通教师', value: result.schoolPtjss, percent: (Number(result.schoolPtjss) / total).toFixed(2)}
          ]
        }
        this.data.resource.edudata = [ // 教师学历分布
          {name: '大专', value: result.schoolJsdzrs},
          {name: '本科', value: result.schoolJsbkrs},
          {name: '硕士研究生', value: result.schoolJsssrs},
          {name: '博士研究生', value: result.schoolJsbsrs},
          {name: '其他', value: result.schoolJsqtrs}
        ]
        this.data.students.baseinfo = [ // 招生基本信息
          {name: '当前招生', value: result.ybm},
          {name: '预报名', value: result.ybmrs},
          {name: '计划招生', value: result.jhzsrs}
        ]
        // 学区内的小区
        const tempArr = []
        for (const item of result.xqnxqList) {
          tempArr.push({
            addressId: item.addressId,
            name: item.xqmc,
            address: item.addressName
          })
        }
        this.data.students.data = tempArr
        const tempArr2 = []
        for (const item of result.lnzsqList) {
          const tempObj = {
            name: item.fl === 'qt' ? '其他' : item.fl + '类',
            value: []
          }
          for (const item2 of item.lnzsqsTjList) {
            tempObj.value.push({
              name: item2.year,
              value: item2.count
            })
          }
          tempArr2.push(tempObj)
        }
        this.data.students.bardata = tempArr2 // 历年招生趋势
        console.log('this.data.students.bardata = ', this.data.students.bardata)
        this.data.students.piedata = [ // 各类别录取率
          {name: 'A类', value: result.segvo.alei * 100},
          {name: 'B类', value: result.segvo.blei * 100},
          {name: 'C类', value: result.segvo.clei * 100}
        ]
        this.data.class = [ // 班级信息
          {name: '一年级', value: result.schoolYnjbjgs},
          {name: '二年级', value: result.schoolEnjbjgs},
          {name: '三年级', value: result.schoolSnjbjgs},
          {name: '四年级', value: result.schoolSinjbjgs},
          {name: '五年级', value: result.schoolWnjbjgs},
          {name: '六年级', value: result.schoolLnjbjgs}
        ]
      })
    }
  },
  mounted () {
    console.log('this.$route.query = ', this.$route.query)
    this.getData(this.$route.query.schoolId)
    // this.getData('02975744-5B03-460A-8098-B9AEEBC53AA6')
  },
  created () {
  },
  watch: {}
}
</script>

<style scoped lang="less">

.container {
  position: relative;
  background: url(../assets/img/page/schoolbg.svg) no-repeat left top #020317;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &_top {
    width: 100%;
    height: 72px;
    background: url("../assets/img/page/titlebg.svg") no-repeat left top /100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topleft {
      width: 516px;
      height: 40px;
      margin-left: 20px;
      display: flex;

      p {
        width: 138px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #53E2FF;
        letter-spacing: 0.96px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #B4F2FF;
          font-weight: bold;
        }
      }
    }

    .topright {
      width: 516px;
      margin-right: 20px;
      display: flex;
      justify-content: end;
      align-items: center;
    }

    p {
      flex: 1;
      font-size: 32px;
      letter-spacing: 1.92px;
      text-align: center;
      line-height: 72px;
      font-weight: 700;
      background-image: linear-gradient(to bottom, #fff, #B6EAFF);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  &_body {
    height: 960px;
    padding: 24px;
    display: flex;
    position: relative;

    .infobox {
      width: 450px;
      position: absolute;
      top: 150px;
      right: 490px;
      z-index: 99999;

      &_top {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left top;

        .infotitle {
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          color: #53E2FF;
          letter-spacing: 0.96px;
          font-weight: bold;

          &:before {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-right: 15px;
            background: url(../assets/img/page/titleleft.svg) no-repeat left center;
            animation: cubeshow1 3s linear infinite forwards;
          }

          &:after {
            width: 32px;
            height: 32px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            padding-left: 15px;
            background: url(../assets/img/page/titleright.svg) no-repeat right center;
            animation: cubeshow2 3s linear infinite forwards;
          }
        }
      }

      &_body {
        min-height: 300px;
        background: rgba(3, 46, 82, 0.80);
        padding: 20px;
      }

      &_bottom {
        width: 100%;
        height: 40px;
        background: url("../assets/img/page/popbg.svg") no-repeat left bottom;
        margin-top: -1px;
      }
    }

    .sidebox {
      width: 450px;
      height: 960px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

    .bmap {
      width: 1500px;
      height: 100%;
      position: absolute;
      left: 210px;
      top: 0;
      z-index: 1;
    }

    .midbox {
      flex: 1;
      margin: 0 24px;
      position: relative;
      z-index: 2;
      background: url(../assets/img/page/midbg.svg) no-repeat center top;
      animation: cloud 2s 2s ease-in infinite alternate;

      .midbody {

        position: relative;

        .midcontent {
          width: 50%;
          position: absolute;
          top: 0;

          .midinfobox1 {
            width: 467px;
            height: 72px;
            line-height: 72px;
            margin-top: 40px;
            background: url("../assets/img/page/leftboxbg.svg") no-repeat center right;

          }

          .midinfobox2 {
            width: 467px;
            height: 72px;
            line-height: 72px;
            margin-top: 40px;
            background: url("../assets/img/page/rightboxbg.svg") no-repeat center right;
          }
        }
      }
    }
  }

  .midtxt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .midtxt2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .midtopcontent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

.progressbox2 {
  width: 418px;
  height: 12px;
  background: rgba(7, 124, 220, .12);
  margin-right: 10px;
  margin-top: 5px;
  display: flex;

  .progresscurbox0 {
    height: 8px;
    background: #FFB936;
    margin-top: 2px;
  }

  .progresscurbox1 {
    height: 8px;
    margin-top: 2px;
    margin-left: 2px;
    background: #077CDC;
  }
}

.tjbox1 {
  width: 200px;
  height: 146px;
  background: url("../assets/img/page/tjbg1.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  p {
    font-size: 14px;
    color: #fff;

    &.tjval0 {
      height: 88px;
      width: 100%;
      text-align: center;
      background: url("../assets/img/page/dotbottom1.svg") no-repeat center;
    }

    &.tjval1 {
      height: 88px;
      width: 100%;
      text-align: center;
      background: url("../assets/img/page/dotbottom2.svg") no-repeat center;
    }

    span {
      font-size: 20px;
      //color: #53E2FF;
      letter-spacing: 1.2px;
    }
  }
}

.normalbutton {
  width: 72px;
  height: 32px;
  line-height: 32px;
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #53E2FF;
  letter-spacing: 0.84px;
  cursor: pointer;
}

.subtitle {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;

  p {
    line-height: 50px;
    font-weight: bold;
    font-size: 16px;
    color: #53E2FF;
    letter-spacing: 0.96px;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }
  }
}

.maintitle {
  width: 100%;
  height: 32px;
  background: url("../assets/img/page/maintitle.svg") no-repeat left top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  p {
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1.2px;
    background-image: linear-gradient(to bottom, #fff, #B6EAFF);
    -webkit-background-clip: text;
    color: transparent;

    &:before {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-right: 15px;
      background: url(../assets/img/page/titleleft.svg) no-repeat left center;
      animation: cubeshow1 3s linear infinite forwards;
    }

    &:after {
      width: 32px;
      height: 32px;
      content: '';
      display: inline-block;
      vertical-align: middle;
      padding-left: 15px;
      background: url(../assets/img/page/titleright.svg) no-repeat right center;
      animation: cubeshow2 3s linear infinite forwards;
    }
  }
}

@keyframes cubeshow2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
    //  transform: rotate(0) scale(1);
  }
}

@keyframes cubeshow1 {
  0% {
    opacity: 0;
    transform: translateX(10px);
    // transform: rotate(0) scale(0);
  }
  50% {
    opacity: 1;
    transform: translateX(0);
    // transform: rotate(0) scale(0.4);
  }
  100% {
    opacity: 0;
    transform: translateX(-10px);
    //  transform: rotate(0) scale(1);
  }
}

.mainbox {
  width: 100%;
  background-image: linear-gradient(180deg, rgba(7, 124, 220, 0.00) 0%, rgba(7, 124, 220, 0.24) 100%);

  &_content {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.listbox {
  width: 50%;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &.listbox0 {
    background: url("../assets/img/page/pdot1.svg") no-repeat left center;
  }

  &.listbox1 {
    background: url("../assets/img/page/pdot2.svg") no-repeat left center;
  }

  &.listbox2 {
    background: url("../assets/img/page/pdot3.svg") no-repeat left center;
  }

  &.listbox3 {
    background: url("../assets/img/page/pdot5.svg") no-repeat left center;
  }

  &.listbox20 {
    background: url("../assets/img/page/pdot10.svg") no-repeat left center;
  }

  &.listbox21 {
    background: url("../assets/img/page/pdot11.svg") no-repeat left center;
  }

  &.listbox22 {
    background: url("../assets/img/page/pdot12.svg") no-repeat left center;
  }

  &.listbox23 {
    background: url("../assets/img/page/pdot13.svg") no-repeat left center;
  }

  p {
    margin-left: 85px;

    &.listval {
      line-height: 42px;
      font-size: 24px;
      color: #53E2FF;
      letter-spacing: 1.44px;
      font-weight: bold;
    }

    &.listname {
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0.84px;
    }
  }

}

.yzjzbox {
  width: 100%;
  margin: 0 auto;
  height: 190px;
  position: relative;

  p {
    text-align: center;
  }

  .yzjzcircle {
    width: 118px;
    height: 118px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /118px 118px;
    position: absolute;
    left: 32px;
    top: 26px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle1 {
    width: 80px;
    height: 80px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /80px 80px;
    position: absolute;
    left: 27px;
    top: 25px;
    animation: rotate1 3s linear infinite forwards;
  }

  .yzjzcircle2 {
    width: 64px;
    height: 64px;
    background: url(../assets/img/page/piebg.svg) no-repeat center /64px 64px;
    position: absolute;
    left: 30px;
    top: 14px;
    animation: rotate1 3s linear infinite forwards;
  }
}

.flexlist {
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.listtxt {
  &.listtxt0 {
    &:before {
      width: 8px;
      height: 8px;
      content: '';
      background: #FFB936;;
      display: inline-block;
      margin-right: 8px;
    }
  }

  &.listtxt1 {
    &:before {
      width: 8px;
      height: 8px;
      content: '';
      background: #077CDC;
      display: inline-block;
      margin-right: 8px;
    }
  }
}

.normaltxt {
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.84px;

  span {
    font-size: 16px;
    letter-spacing: 0.96px;
    font-weight: bold;
    padding: 0 10px;

    &.keyyellow {
      color: #FFB936;
    }

    &.up {
      background: url("../assets/img/page/dotup.svg") no-repeat left center;
      padding-left: 20px;
    }

    &.keyblue {
      color: #53E2FF;
    }
  }

  b {
    font-weight: normal;
    color: rgba(255, 255, 255, .72)
  }
}

.xuexiaolistbox {
  width: 136px;
  height: 40px;
  line-height: 40px;
  background: #0D2246;
  border: 1px solid rgba(1, 66, 120, 1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 2px;
  cursor: pointer;

  &.active {
    border: 1px solid rgba(83, 226, 255, 1);
  }

  p {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
  }
}

.sortbox {
  width: 80%;
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;

  p {
    cursor: pointer;

    &:before {
      content: '';
      width: 16px;
      height: 16px;
      background: #0D2246;
      border: 1px solid rgba(7, 124, 220, 0.56);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }

    &.active:before {
      content: '✔';
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      color: #53E2FF;
      background: #0D2246;
      border: 1px solid rgba(83, 226, 255, 1);
      border-radius: 2px;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
  }
}

.zslist {
  height: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &.zslist0 {
    background: url("../assets/img/page/icon0.svg") no-repeat center top;
  }

  &.zslist1 {
    background: url("../assets/img/page/icon1.svg") no-repeat center top;
  }

  &.zslist2 {
    background: url("../assets/img/page/icon2.svg") no-repeat center top;
  }
}

.flexbetween {
  display: flex;
  justify-content: space-between;
}

.flexbox {
  display: flex;
  align-items: center;
}

.flexwrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.wrap-table {
  width: 100%;
  border-spacing: 0
}

.wrap-table table {
  width: 100%;
  table-layout: fixed;
}

.wrap-table.head tr th {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background: rgba(7, 124, 220, .24);
}

.wrap-table.body tr {
  td {
    font-size: 14px;
    padding: 8px 2px;
    text-align: center;
    letter-spacing: 0.84px;
    color: rgba(255, 255, 255, .72);
    background: rgba(7, 124, 220, .12);

    .progressbox1 {
      width: 180px;
      height: 12px;
      background: rgba(7, 124, 220, .12);
      position: relative;
      margin-right: 10px;
      margin-top: 5px;

      .progresscurbox {
        height: 4px;
        position: absolute;
        left: 4px;
        top: 4px;
        background: rgba(4, 193, 255, 1);

        &.progress0 {
          background: #FFB936;
        }
      }
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.sortN0 {
        color: #FFB936;
        display: flex;
        justify-content: center;
        align-items: center;

        &:before {
          content: 'NO.';
          display: inline-block;
          vertical-align: middle;
        }
      }

      &.yellowkey {
        color: #FFB936;
      }
    }
  }

  &:nth-child(odd) {
    td {
      background: rgba(7, 124, 220, .04);
    }
  }

}

.wrap-table.body tr td.keyblue {
  font-size: 14px;
  color: #05D7FF;
  font-weight: 600;
}

@keyframes rotate1 {
  0% {
    transform: rotate(0) scale(1);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

/*下拉框*/
/deep/ .el-input {
  font-size: 16px;
  color: #FFFFFF;
}

/deep/ .el-input__inner {
  background: #0D2246;
  border: 1px solid rgba(7, 124, 220, 1);
  border-radius: 4px;
  color: #53E2FF;
  font-size: 16px;

  &::-webkit-input-placeholder {
    color: #53E2FF;
  }
}

/deep/ .el-select-dropdown__item {
  color: #fff;
}

/deep/ .el-select:hover .el-input__inner {
  border-color: #6ABEFF
}

/deep/ .el-select-dropdown {
  background: rgba(3, 32, 64, 0.80);
  border: 1px solid rgba(61, 82, 103, 1);
  border-radius: 8px;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

/deep/ .el-popper .popper__arrow::after {
  border-width: 0;
}

/deep/ .el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: transparent;
}

/deep/ .el-select-dropdown__item.selected {
  background: rgba(106, 190, 255, 0.16);
  color: #6ABEFF;
  font-weight: normal;
}

/deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover {
  background: rgba(106, 190, 255, 0.16);
}

/deep/ .el-radio {
  font-size: 16px;
  color: #53E2FF;
  letter-spacing: 0.96px;
}
</style>
